<script setup lang='ts'>
import { onMounted, ref } from "vue";
import { getAnn } from "../../api/api";
const data = ref()
const getData = async() => {
    const res = await getAnn()
    data.value = res.data.data
}
onMounted(()=>{
    getData()
})
</script>

<template>
    <div class="contentpc">
        <div class="title"><p>公告</p><el-icon style="margin-left: 10px;position: relative;top: 1px;" size="20"><BellFilled /></el-icon></div>
        <div class="annData">
            <el-carousel height="50px" direction="vertical" motion-blur :autoplay="true">
                <el-carousel-item v-for="item in data" :key="item" class="data">
                    <h3 text="2xl" justify="center">{{ item.data }}</h3>
                </el-carousel-item>
            </el-carousel>
        </div>
    </div>
</template>

<style scoped>
.contentpc {
    max-width: 1300px;
    height: 50px;
    margin: auto;
    margin-top: 20px;
    overflow: hidden;
    border-radius: 20px;
    display: grid;
    grid-template-columns: 15% 85%;
}
.data{
    display: flex;
    align-items: center;
}
.title {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #39364d;
    color: white;
}
.annData{
    background-color: white;
}
:deep(.el-carousel__indicators){
    display: none;
}
h3{
    margin-left: 20px;
}
</style>